<template>
  <d2-container>
      <el-form :inline="true" :model="form" ref="search" :rules="rules" size="mini">
        <el-form-item label="内容" prop="content">
          <el-input placeholder="记录ID/用户名" v-model="form.content" maxlength="30"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select  style= "width: 100px" placeholder="" v-model="form.type">
            <el-option label="记录ID" value="id"></el-option>
            <!-- <el-option label="标题" value="title"></el-option> -->
            <el-option label="用户名" value="username"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
        </el-form-item>
      </el-form>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%">
        <span>{{ dialogContent }}</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <div v-if="tableData != null">
        <el-table
          :data="tableData"
          empty-text="未查询到相关记录~"
          style="width: 100%"
          max-height="800"
          >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="商品描述">
                  <span>{{ props.row.record.desc }}</span>
                </el-form-item>
                <el-form-item label="图片">
                  <el-popover v-for="path in props.row.record.images" :key="path" trigger="hover" placement="bottom">
                    <el-image class="amplification" fit="contain" :src="imageUrl(path)"></el-image>
                    <el-image class="thumbnail" fit="contain" slot="reference"  :src="imageUrl(path)"></el-image>  
                  </el-popover>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column width="100px" label="记录ID" prop="record.id"></el-table-column>
          <el-table-column width="150px" label="用户名" prop="extra.username"></el-table-column>
          <el-table-column width="200px" label="发布时间">
            <template slot-scope="props">
                {{ transformTime2Date(props.row.record.time) }}
            </template>
          </el-table-column>
          <el-table-column label="标题" prop="record.title"></el-table-column>
          <el-table-column width="100px" label="价格">
            <template slot-scope="props">
              {{ `￥${props.row.record.price}` }}
            </template>
          </el-table-column>
          <el-table-column width="100px" label="分类">
            <template slot-scope="props">
              {{ props.row.extra.classes }}
            </template>
          </el-table-column>
          <el-table-column width="100px" label="状态">
            <template slot-scope="props">
              <span :style="{ color: stateTagColor(props.row.record.state) }">
                {{ stateTag(props.row.record.state) }}
                </span>
            </template>
          </el-table-column>
          <el-table-column 
            fixed="right"
            label="操作">
            <template slot-scope="scope">
              <el-button :disabled="scope.row.record.state == 3"
                size="mini"
                @click="actionModifyState(scope.row, 1)">通过</el-button>
              <el-button :disabled="scope.row.record.state == 3"
                size="mini"
                type="danger"
                @click="actionModifyState(scope.row, 2)">撤销</el-button>
              <el-button :disabled="scope.row.record.state == 3"
                size="mini"
                type="info"
                @click="actionModifyState(scope.row, 0)">重置</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          layout="prev, pager, next"
          :total="tableData.length">
        </el-pagination>
        </div>
  </d2-container>
</template>

<script>
import axios from '@/plugin/axios'
import qs from 'qs'

export default {
  name: 'findrecord',
  data (){
    var validateContent = (rule, value, callback) => {
      switch (this.form.type){
        case 'id': {
          if (value == ''){
            callback(new Error('请输入记录ID'))
          } else {
            if (Number.isNaN(Number(value))) {
              callback(new Error('请输入数字值'))
            } else {
              callback()
            }
          }
        } break
        case 'title': {
          if (value === ''){
            callback(new Error('请输入标题关键字'))
          } else {
              callback()
          }
        } break
        case 'username': {
          if (value === ''){
            callback(new Error('请输入用户名'))
          } else {
              callback()
          }
        } break
      }
    }
    return {
      stateTags: ["待审核", "通过", "未通过", "已卖掉"],
      stateTagColors: ['#9e9e9e', '#4caf50', '#f44336', '#ff9800'],
      tableData: null,
      form: {
        content: '',
        type: 'id'
      },
      dialogVisible: false,
      dialogContent: '',
      rules: {
        content: [
          { validator: validateContent, trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    showDialog (text) {
      this.dialogContent = text
      this.dialogVisible = true
    },
    query () {
      this.$refs['search'].validate((valid) => {
        if (valid){
          axios.post('/admin/queryRecord', qs.stringify({
            content: this.form.content,
            type: this.form.type
          })).then( data => {
            data.forEach(item => {
                var paths = JSON.parse(item.record.images)
                item.record.images = paths
            })
            this.tableData = data
          })
        }
      })
    },
     transformTime2Date: function(time){
        var date = new Date(time)
        return date.toLocaleString()
      },
      stateTag: function(state){
        return this.stateTags[state]
      },
      stateTagColor: function(state){
        return this.stateTagColors[state]
      },
      actionModifyState(row, state){
        axios.post('/admin/change_record_state', 
          qs.stringify({
            id: row.record.id,
            state: state
          })).then(async data =>{
          row.record.state = state
        })
      }, 
      imageUrl(path){
        return `${process.env.VUE_APP_API}${path}`
      }
  }
}
</script>

<style scoped>
      .demo-table-expand {
        font-size: 0;
      }
      .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
      }
      .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 100%;
      }
      
    .thumbnail {
        width: 100px;
        height: 100px;
        margin-right: 5px;
    }

    .amplification {
      width: 400px
    }
</style>
